<template>
  <ele-modal
    :width="950"
    :visible="visible"
    :confirm-loading="loading"
    :title="'高级查询'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    @ok="save"
  >
    <a-form
      :label-col="{ md: { span: 2 }, sm: { span: 4 }, xs: { span: 24 } }"
      :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
    >
      <a-row :gutter="24">
        <a-col :md="24" :sm="24" :xs="24">
          <table cellpadding="0" cellspacing="0" class="recepit_table2">
            <tr>
              <td class="tit">退货单号</td>
              <td>
                <a-input
                  allow-clear
                  placeholder="请输入"
                  v-model:value="form.refund_sn"
                  autocomplete="off"
                />
              </td>
              <td class="tit">退货时间</td>
              <td>
                <a-range-picker v-model:value="time" @calendarChange="change" />
              </td>
            </tr>
            <tr>
              <td class="tit">销售单号</td>
              <td>
                <a-input
                  allow-clear
                  placeholder="请输入"
                  v-model:value="form.order_sn"
                  autocomplete="off"
                />
              </td>
              <td class="tit">条码</td>
              <td>
                <a-input
                  allow-clear
                  placeholder="请输入"
                  v-model:value="form.bar_code"
                  autocomplete="off"
                />
              </td>
            </tr>
            <tr>
              <td class="tit">会员姓名</td>
              <td>
                <a-input
                  allow-clear
                  placeholder="请输入"
                  v-model:value="form.name"
                  autocomplete="off"
                />
              </td>
              <td class="tit">会员手机</td>
              <td>
                <a-input
                  allow-clear
                  placeholder="请输入"
                  v-model:value="form.mobile"
                  autocomplete="off"
                />
              </td>
            </tr>
          </table>
        </a-col>
      </a-row>
    </a-form>
  </ele-modal>
</template>

<script setup>
  import { ref, unref, reactive, onMounted, watch } from 'vue';
  import { Modal, message } from 'ant-design-vue';
  import { useRouter } from 'vue-router';
  import dayjs from 'dayjs';

  const emit = defineEmits(['update:visible', 'doSearch']);
  const props = defineProps({
    // 弹窗是否打开
    visible: Boolean
  });

  const loading = ref(false);
  const dateFormat = ref('YYYY-MM-DD');
  const getYMD = () => {
    let myDate = new Date();
    let myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
    let myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
    let myToday = myDate.getDate(); //获取当前日(1-31)
    myMonth = myMonth > 9 ? myMonth : '0' + myMonth;
    myToday = myToday > 9 ? myToday : '0' + myToday;
    let nowDate = myYear + '-' + myMonth + '-' + myToday;
    return nowDate;
  };
  const time = ref([
    dayjs(getYMD(), dateFormat.value),
    dayjs(getYMD(), dateFormat.value)
  ]);

  const form = reactive({
    order_sn: '',
    refund_sn: '',
    refund_start_time: '',
    refund_end_time: '',
    name: '',
    mobile: '',
    bar_code: ''
  });

  const change = (date, dateString) => {
    console.log(dateString);
    form.refund_start_time = dateString[0];
    form.refund_end_time = dateString[1];
  };

  const save = () => {
    emit('doSearch', form);
  };

  /* 更新visible */
  const updateVisible = (value) => {
    emit('update:visible', value);
  };
  defineExpose({});
</script>

<style lang="less" scoped>
  .pay_label {
    display: inline-block;
    min-width: 70px;
    text-align: right;
  }
</style>
